import React from 'react';
import {inject, observer} from 'mobx-react';
import * as mobx from 'mobx';
import {Button, Icon, Row, Col} from 'antd';
import {WeaLocaleProvider, WeaDialog, WeaRightMenu, WeaMoreButton, WeaFormItem, WeaSelect, WeaInput, WeaBrowser, WeaUpload,WeaColorPicker,WeaCheckbox} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import './style/';
import {WeaSearchGroup} from "./setting";
import {WeaPortalShare,WeaMaterialLib} from 'weaPortalPublic';
class Add extends React.Component{

    state = {
        application:{
        }

    }

    setStateData = (stateData)=>{
        let application = Object.assign(this.state.application,stateData);
        this.setState({
            application
        })
    }

    urlTypeChange = (value)=>{
        if(value == 1){
            this.setStateData({"urlType":value,url:""})
        }else if(value == 2){
            this.setStateData({"urlType":value,replaceData:""})
        }

    }

    componentWillReceiveProps(nextProps){
        if(nextProps.state.setId!=-1){
            this.setStateData(nextProps.state.dataList[nextProps.state.setId])
            this.setStateData({replaceData:JSON.parse(this.state.application.replaceData)})
        }else{
            if(nextProps.state.currentParentId==0){
                this.setStateData({
                    id:-1,
                    name:"",
                    url:"",
                    urlType:1,
                    parentId:nextProps.state.currentParentId,
                    replaceData:"",
                    backGroundColor: '#2db7f5',
                    logo:"",
                    enable:'0',
                    fontColor2:""

                })
            }else{
                this.setStateData({
                    id:-1,
                    name:"",
                    url:"",
                    urlType:1,
                    parentId:nextProps.state.currentParentId,
                    replaceData:"",
                    backGroundColor: '',
                    logo:"",
                    enable:'0',
                    fontColor2:""


                })
            }

        }
    }


    getRightMenus=()=> {
        let onAddSave = this.props.save
        let data = this.state.application
        let btns = [];
        btns.push({key: '1', icon: <i className="icon-coms-Preservation"/>, content: getLabel(30986, '保存'), onClick: ()=>{onAddSave(data)}});
        return btns;
    }

    getButtons= ()=> {
        let onAddSave = this.props.save
        let data = this.state.application
        let btns = [];
        btns.push(<Button type="primary" onClick={()=>{onAddSave(data)}}>{getLabel(30986, '保存')}</Button>);
        btns.push(<WeaMoreButton datas={this.getRightMenus()}/>);
        return btns;
    }

    render (){
        const colProps = {
            labelCol: {span: 6},
            wrapperCol: {span: 16}
        };
        return (
            <WeaDialog
                title="设置"
                visible={this.props.state.addVisiable}
                iconBgcolor='#1a57a0'
                hasScroll={true}
                style={{width: 700,height:300}}
                buttons={this.getButtons()}
                onCancel={()=>{this.props.setStateData({addVisiable:false,setId:-1})}}
            >
                <div className="e9desktop-menu-add">
                    <WeaFormItem label={getLabel(385808, '菜单地址')} {...colProps}>
                        <Row gutter={8}>
                            <Col span={8}>
                                <WeaSelect
                                    value={this.state.application.urlType+""}
                                    options={[
                                        {key: '1', selected: true, showname: getLabel(33496, '系统菜单')},
                                        {key: '2', selected: false, showname: getLabel(385809, '自定义URL')}
                                    ]}
                                    onChange={value => {this.urlTypeChange(value)}}
                                />
                            </Col>
                            <Col span={16}>
                                {this.state.application.urlType == '2' ? (
                                    <WeaInput
                                        value={this.state.application.url}
                                        viewAttr={2}
                                        onChange={
                                            (value) => {
                                                let url = value;
                                                if (value.indexOf('www.') == 0) url = 'http://' + url;
                                                this.setStateData({"url":url});
                                            }
                                        }
                                        helpfulTip={getLabel('386567', '外部地址，请在地址前加上http://或https://')}
                                    />
                                ) : (
                                    <WeaBrowser
                                        title={getLabel(33496, '系统菜单')}
                                        type={'portalmenu'}
                                        tabs={[
                                            {name: getLabel(33675, '前端菜单'), key: '1', dataParams: {sourcetype: '1'}, conditionDataParams: {sourcetype: '1'}},
                                            {name: getLabel(33676, '后端菜单'), key: '2', dataParams: {sourcetype: '2'}, conditionDataParams: {sourcetype: '2'}},
                                            {name: getLabel(18773, '自定义菜单'), key: '3', dataParams: {sourcetype: '3'}, conditionDataParams: {sourcetype: '3'}},
                                            {name: getLabel(23094, '系统门户页面'), key: '4', dataParams: {sourcetype: '4'}, conditionDataParams: {sourcetype: '4'}}
                                        ]}
                                        viewAttr={2}
                                        replaceDatas={mobx.toJS(this.state.application.replaceData)}
                                        onChange={(id, name, data) => {this.setStateData({"replaceData": data})}}
                                    />
                                )
                                }
                            </Col>
                        </Row>
                    </WeaFormItem>
                    <WeaFormItem label={getLabel(30828, '显示名称')} {...colProps}>
                        <WeaInput value={this.state.application.name} viewAttr={3} onChange={value => this.setStateData({"name": value})}/>
                    </WeaFormItem>
                    {
                        this.state.application.parentId == 0
                            ? (
                                <WeaFormItem label="背景颜色" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                    <div className="lr_managerSetting_style_base_input2" >
                                        <WeaColorPicker
                                            value={this.state.application.backGroundColor}
                                            onChange={(v)=> {this.setStateData({"backGroundColor":v})}}
                                        />
                                    </div>

                                </WeaFormItem>

                            )
                            :""
                    }
                    {
                        this.state.application.parentId == 0
                            ? (
                                <WeaFormItem label="标题图片" labelCol={{span: 6}} wrapperCol={{span: 18}}>
                                    {
                                        this.state.application.logo ? (
                                            <div className="e9desktop-menu-add-img-edit">
                                                <WeaMaterialLib multiCheck={false} onChange={(value)=>{ this.setStateData({"logo":value})}} type='button' >
                                                    <img src={ this.state.application.logo } alt="" className="e9desktop-menu-add-img-edit-img" title={getLabel(387150, '更换图标')}/>
                                                </WeaMaterialLib>
                                                <div className="e9desktop-menu-add-img-edit-del" title={getLabel(82746, '删除图标')}>
                                                    <Icon type="cross" onClick={() =>{this.setStateData({"logo":""})} }/>
                                                </div>
                                            </div>
                                        ) : (
                                            <div className="e9desktop-menu-add-img-add">
                                                <WeaMaterialLib multiCheck={false} onChange={(value)=>{this.setStateData({"logo":value})}} type='button' >

                                                    <div className="e9desktop-menu-add-img-add-icon" title={getLabel(387151, '添加图标')}>
                                                        <Icon type="plus"/>
                                                    </div>
                                                </WeaMaterialLib>
                                            </div>
                                        )
                                    }
                                </WeaFormItem>

                            )
                            :""
                    }
                    {
                        this.state.application.parentId != 0
                            ?(
                                <WeaFormItem label="字体颜色" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                    <span style={{'vertical-align':'middle'}}>透明:</span>
                                    <div className="lr_addCustomApplication_bgc_div_checkbox_middle" >
                                        <WeaCheckbox
                                            value={this.state.application.fontColor2?"0":"1"}
                                            onChange={(value) => {
                                                if (value === "1") {
                                                    this.setStateData({"fontColor2":""})
                                                } else {
                                                    this.setStateData({"fontColor2":"#eeeeee"})
                                                }
                                            }}
                                        />
                                    </div>
                                    {
                                        this.state.application.fontColor2 ?(  <div className="lr_addCustomApplication_bgc_div_colorPicker_middle" >
                                            <WeaColorPicker
                                                value={this.state.application.fontColor2}
                                                onChange={(v)=> this.setStateData({"fontColor2": v})}
                                            />
                                        </div>):""
                                    }
                                </WeaFormItem>
                            ):""
                    }
                    {
                        this.state.application.parentId != 0
                            ?(
                                <WeaFormItem label="禁用" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                    <WeaCheckbox
                                        value={ this.state.application.enable}
                                        display="switch"
                                        id='test'
                                        style={{display: 'inline'}}
                                        onChange={(value)=>{ this.setStateData({"enable":value})}}
                                    />
                                </WeaFormItem>
                            ):""
                    }

                </div>
            </WeaDialog>
        )
    }
}
export default Add;